#人才招聘
<route lang="yaml">
meta:
  layout: layout_as
</route>


<template>
  <div class="no-scroll">
    <div class="icons-container">
      <!-- 星星元素 -->
      <div v-for="(icon, index) in icons" :key="index" class="icon icon{{ index }}" :style="{ left: icon.left, top: icon.top, animationDelay: icon.delay }">
        <v-icon>{{ icon.type }}</v-icon>
      </div>
    </div>

    <AppNavigation></AppNavigation>

    <div>
      <v-img
          aspect-ratio="16/9"
          cover
          src="@/assets/social/welcome.png"
      ></v-img>
    </div>

    <div class="title-container">
      <h1 class="title">推荐的结果：</h1>
      <button class="button" @click="toggleSatisfaction">
        <span v-if="satisfied" style="font-size: 34px">😊</span>
        <span v-else style="font-size: 34px">😠</span>
      </button>
    </div>

    <div class="cards-container">
      <div v-for="(user,index) in talents_list" :key="index" class="card" @click="showModal(user)">
        <div class="card-header">
          <img src="@/assets/social/head2.png" alt="Avatar">
        </div>
        <div class="card-content">
          <h2>{{ user.Name }}</h2>
          <p>Email: {{ user.Email }}</p>
          <p>Phone: {{ user.Telephone }}</p>
        </div>
      </div>
    </div>

    <!-- 详细信息展示模态框 -->
    <transition name="modal" appear>
      <v-dialog v-model="dialogShown" persistent max-width="800px">
        <v-card class="detail-card">
          <v-toolbar color="primary" dark>
            <v-toolbar-title>详细信息</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon @click="dialogShown = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </v-toolbar>
          <v-card-text v-if="selectedUser" class="user-card-text">
            <div class="user-info">
              <h3>{{ selectedUser.Name }}</h3>
              <div class="info-details">
                <p><strong>Email:</strong> {{ selectedUser.Email }}</p>
                <p><strong>Phone:</strong> {{ selectedUser.Telephone }}</p>
              </div>
            </div>
          </v-card-text>
        </v-card>
      </v-dialog>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import AppNavigation from "@/components/AppNavigation.vue";
import talents_list from '../store/talents_list.js';

let dialogShown = ref(false);
let selectedUser = ref(null);

const satisfied = ref(true);
const icons = [
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
];

const toggleSatisfaction = () => {
  satisfied.value = !satisfied.value;
};

const showModal = (user) => {
  selectedUser.value = user;
  dialogShown.value = true;
};

</script>



<style scoped>

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  width: 300px;
  background-color: #f5f5f5;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  margin: 20px;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.card-header {
  text-align: center;
  padding: 20px 0;
}

.card-header img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #fff;
}

.card-content {
  padding: 20px;
}

.resume {
  display: none;
}

.show-resume .resume {
  display: block;
}

.card {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  color: rgb(255, 72, 0);
  transform: translateY(-5px);
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.contact, .location {
  transition: color 0.3s;
}

.icon {
  position: absolute;
  font-size: 30px; /* 减小星星的大小 */
  color: #ffd700; /* 星星黄色 */
  z-index: 999; /* 将图标置于最顶层 */
  animation: iconFall 8s linear infinite; /* 调整速度 */
  filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700); /* 添加发光效果 */
}

/* 图标下落的动画效果 */
@keyframes iconFall {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(1000%); /* 页面底部 */
  }
}

.title-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between; /* 水平方向均匀分布 */
  align-items: center; /* 垂直方向居中对齐 */
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  /* 添加发光效果 */
  text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  animation: glow 2s infinite linear;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  }
  50% {
    text-shadow: none;
  }
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 10;
}

.user-card-text {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.user-info {
  margin-top: 10px;
}

.user-info h3 {
  margin-bottom: 10px;
}

.info-details p {
  margin: 5px 0;
}

.info-details p strong {
  display: inline-block;
  width: 80px; /* 设置固定宽度 */
  font-weight: bold;
}

</style>
